<template>
  <view class="content">
    <!-- 轮播图 -->
    <!-- <swiperBox :abc="list" /> -->
    <!-- <view><img src="../../static/test.jpg" width="100%"></view> -->
    <!-- <view class="g-classify">
      <view class="m-classifyBox">
        <text class="m-classify" v-for="(text,index) in classify" :key="index">{{text}}</text>
      </view>
      <image src="../../static/split.png" class="u-split" />
      <image src="../../static/moreClassify.png" class="u-moreClassify" />
    </view> -->
    <view class="g-projectList">
      <navigator url="/pages/index/projectInfo" open-type="navigate">99
        <!-- <projectList /> -->
      </navigator>
      <projectList :data="newsData" />
      <button @click="showMoreFunc()" class="showmore" v-show="showFlag">加载更多</button>
    </view>
    <image src="../../static/fixed.png" class="u-fixed" @click="navigatorTo()" />
  </view>
</template>

<script lang="ts">
  import Vue from "vue";
  import segmentedControl from "@/components/segmented-control.vue";
  import videoList from "@/components/videoList.vue";
  import searchInput from "@/components/searchInput.vue";
  import swiperBox from "@/components/swiperBox.vue";
  import projectList from "@/components/projectList.vue";
  export default Vue.extend({
    components: {
      segmentedControl,
      videoList,
      searchInput,
      swiperBox,
      projectList
    },
    data() {
      return {
        newsData: [],
        max_pos: "",
        showFlag: false,
        classify: [
          "全部",
          "传媒影视",
          "创意设计",
          "现代时尚",
          "音乐艺术",
          "文体旅游",
          "信息服务",
          "会展广告",
          "教育咨询",
          "休闲娱乐服务",
          "康养",
          "文化创意投资运营",
          "文化创意相关产业"
        ],
        items: ["推荐", "直播", "回看"],
        currentTab: 1,

        videoMsg: [
          {
            title:
              "厨电龙头的优势扩大遇到了什么障碍？国泰君安家电产融线上论坛（2020）",
            img: "../../static/test.jpg",
            status: "直播"
          },
          {
            title:
              "厨电龙头的优势扩大遇到了什么障碍？国泰君安家电产融线上论坛（2020）",
            img: "../../static/test.jpg",
            status: "预约"
          },
          {
            title:
              "厨电龙头的优势扩大遇到了什么障碍？国泰君安家电产融线上论坛（2020）",
            img: "../../static/test.jpg",
            status: "回看"
          }
        ]
      };
    },
    onShow() {
      console.log("App Show");
    },
    onLoad() {
      let that = this;
      that.getData(this.max_pos)
    },
    mounted() {
      // 文创新闻

    },
    methods: {
      getData(pos) {
        let that = this;
        uni.request({
          url: "https://luyan.nbd.com.cn/api/projects/project_lists.json?max_pos=" + pos,
          method: 'GET',
          success: function (res) {
            console.log(res['data']['data']);
            let resData = res['data']['data'];
            that.showFlag = true;
            if (resData.length < 10) {
              that.showFlag = false
            }
            that.newsData = that.newsData.concat(resData);
            that.max_pos = resData[resData.length - 1].pos;
          }
        })
      },
      showMoreFunc() {
        this.getData(this.max_pos)
      },


    }
  });
</script>

<style lang="scss">
  .u-fixed {
    width: 110upx;
    height: 110upx;
    position: fixed;
    right: 30upx;
    bottom: 300upx;
  }

  .content {
    padding: 30upx;
    overflow: hidden;
  }

  .g-classify {
    margin: 0 -30upx;
    background: #171b31;
    padding: 0 30upx;
    font-size: 33upx;
    overflow: hidden;
  }

  .m-classifyBox {
    width: 610upx;
    float: left;
    height: 90upx;
    overflow: hidden;
    white-space: pre;
    line-height: 90upx;
  }

  .m-classify {
    color: #a2a4ad;
    margin-right: 35upx;
  }

  .u-split {
    width: 2upx;
    height: 38upx;
    float: left;
    margin: 30upx 15upx 0;
  }

  .showmore {
    background: #edac36;
    width: 200upx;
    margin: 40upx auto;
    color: #fff;
    font-size: 30upx;
  }

  .u-moreClassify {
    width: 32upx;
    height: 32upx;
    float: left;
    margin-top: 30upx;
  }

  .g-projectList {
    overflow: hidden;
    margin-top: 33upx;
  }
</style>